<template>
  <view class="container">
    <!-- 申请列表 -->
    <view class="table-container">
      <!-- 数据列表 -->
      <view class="card-list" v-if="processInstanceList.length > 0">
        <wd-card
          v-for="(item, index) in paginatedList"
          :key="item.id"
          class="workflow-card"
          @tap="handleOpen(item)"
        >
          <view class="card-content">
            <view class="card-row top-row">
              <view class="flow-name">
                <text class="item-number">{{ (queryParams.pageNum - 1) * queryParams.pageSize + index + 1 }}. </text>
                {{ item.flowName || '未知流程' }}
              </view>
              <view class="flow-status" :class="getStatusClass(item.flowStatus)">
                {{ getStatusText(item.flowStatus) }}
              </view>
            </view>

            <view class="card-row bottom-row">
              <view class="node-name">{{ item.nodeName || '暂无节点' }}</view>
              <view class="create-time">{{ formatTime(item.createTime) }}</view>

            </view>
          </view>
        </wd-card>
      </view>

      <!-- 空数据提示 -->
      <view v-else-if="!loading" class="empty-box">
        <text class="empty-text">暂无申请数据</text>
      </view>

      <!-- 加载提示 -->
      <view v-if="loading" class="loading-box">
        <text class="loading-text">加载中...</text>
      </view>
      <wd-pagination
        style="margin-top: 20rpx;"
        v-show="total > 0"
        v-model="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="total"
        @change="handleChange"
        show-icon
        show-message
        :hide-if-one-page="false"
      />
    </view>

  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs, computed, reactive } from 'vue'
import { pageByCurrent } from '@/pagesA/api/workflow/instance';
import type { FlowInstanceQuery, FlowInstanceVO } from '@/pagesA/api/workflow/instance/types';
import { useDict } from '@/api/system/dict';
import type { RouterJumpVo } from '../api/workflow/workflowCommon/types';
import type { FlowTaskVO } from '../api/workflow/task/types';
import workflowCommon from '../api/workflow/workflowCommon';
import { onShow } from '@dcloudio/uni-app';
const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
const queryParams = ref<FlowInstanceQuery>({
  pageNum: 1,
  pageSize: 20,
  flowName: undefined,
  category: undefined
});
const processInstanceList = ref<FlowInstanceVO[]>([]);
const total = ref(0);
const loading = ref(false);

// 计算属性：根据当前页码和每页大小来分页显示数据
const paginatedList = computed(() => {
  const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize;
  const end = start + queryParams.value.pageSize;
  return processInstanceList.value.slice(start, end);
});

const handleChange = (val: number) => {
    queryParams.value.pageNum = val;
    getList();
};
const getList = async () => {
  loading.value = true;
  pageByCurrent(queryParams.value).then((resp: any) => {
    processInstanceList.value = resp.rows || resp.data || [];
    total.value = resp.total || 0;
    loading.value = false;
  }).catch(() => {
  });
};
const handleOpen = async (row: FlowTaskVO) => {
  try {
    const routerJumpVo = reactive<RouterJumpVo>({
      businessId: row.businessId,
      taskId: row.id,
      type: 'view',
      formCustom: row.formCustom,
      formPath: row.formPath
    });
    workflowCommon.routerJump(routerJumpVo);
  } catch (error) {
    // 静默处理错误
  }
};
// 获取状态样式类
const getStatusClass = (status: string) => {
    switch (status) {
        case 'waiting': return 'status-running';
        case 'finish': return 'status-completed';
        case 'back': return 'status-rejected';
        case 'cancel': return 'status-cancelled';
        default: return 'status-default';
    }
};

// 获取状态文本
const getStatusText = (status: string) => {
    // 使用字典数据
    if (wf_business_status.value && wf_business_status.value.length > 0) {
        const statusItem = wf_business_status.value.find((item: any) => item.value === status);
        if (statusItem) {
            return statusItem.label;
        }
    }

    // 默认状态文本
    switch (status) {
        case '1': return '进行中';
        case '2': return '已完成';
        case '3': return '已拒绝';
        case '4': return '已取消';
        default: return '进行中';
    }
};

// 格式化时间 - iOS兼容版本（增强版）
const formatTime = (timeStr: string) => {
    if (!timeStr) return '-';

    try {
      // 转换为字符串
      const timeString = String(timeStr);

      // 多种格式兼容处理
      let formattedTimeStr = timeString;

      // 处理 "2025-07-04 13:21:07" 格式 -> "2025/07/04 13:21:07"
      if (timeString.match(/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/)) {
        formattedTimeStr = timeString.replace(/-/g, '/');
      }
      // 处理 "2025-07-04" 格式 -> "2025/07/04"
      else if (timeString.match(/^\d{4}-\d{2}-\d{2}$/)) {
        formattedTimeStr = timeString.replace(/-/g, '/');
      }
      // 处理 "2025-07-04T13:21:07" ISO格式 -> "2025/07/04 13:21:07"
      else if (timeString.includes('T')) {
        formattedTimeStr = timeString.replace(/-/g, '/').replace('T', ' ').split('.')[0];
      }

      const date = new Date(formattedTimeStr);

      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        return timeString; // 如果无法解析，返回原始字符串
      }

      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    } catch (error) {
    }
};

onShow(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30rpx;
  position: relative;
  overflow-x: hidden;

  /* 背景装饰 */
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes float {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}

.table-container {
  background: transparent;
  position: relative;
  z-index: 1;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.workflow-card {
  margin-bottom: 0;
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-height: 160rpx;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 28rpx 28rpx 0 0;
  }

  &:hover {
    transform: translateY(-10rpx) scale(1.02);
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
  }

  :deep(.wd-card__body) {
    padding: 40rpx;
  }
}

.card-content {
  width: 100%;
  position: relative;
  min-height: 220rpx;
  height: auto;
  padding: 12rpx 0;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;

  &.top-row {
    margin-bottom: 32rpx;
    position: relative;
    padding-bottom: 8rpx;
  }

  &.bottom-row {
    margin-top: 32rpx;
    padding-top: 32rpx;
    border-top: 1rpx solid rgba(102, 126, 234, 0.08);
    position: relative;
    align-items: flex-end;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100rpx;
      height: 2rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 1rpx;
      box-shadow: 0 1rpx 4rpx rgba(102, 126, 234, 0.2);
    }
  }
}

.flow-name {
  font-size: 36rpx;
  font-weight: 700;
  color: #1a1a1a;
  flex: 1;
  margin-right: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.6;
  position: relative;
  letter-spacing: 0.5rpx;
  transition: color 0.3s ease;

  &::before {
    content: '';
    position: absolute;
    left: -12rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 28rpx;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 4rpx;
    box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
  }

  .item-number {
    color: #667eea;
    font-weight: 800;
    margin-right: 20rpx;
    font-size: 34rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 2rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 1rpx;
      opacity: 0.4;
    }
  }
}

.flow-status {
  margin-top: 18rpx;
  padding: 18rpx 28rpx;
  border-radius: 28rpx;
  font-size: 26rpx;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(15rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.4);
  min-width: 130rpx;
  text-align: center;
  letter-spacing: 0.5rpx;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s ease;
    z-index: 1;
  }

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);

    &::before {
      left: 100%;
    }
  }

  &.status-running {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.25) 100%);
    color: #1890ff;
    box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);
  }

  &.status-completed {
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.15) 0%, rgba(82, 196, 26, 0.25) 100%);
    color: #52c41a;
    box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.2);
  }

  &.status-rejected {
    background: linear-gradient(135deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.25) 100%);
    color: #ff4d4f;
    box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.2);
  }

  &.status-cancelled {
    background: linear-gradient(135deg, rgba(140, 140, 140, 0.15) 0%, rgba(140, 140, 140, 0.25) 100%);
    color: #8c8c8c;
    box-shadow: 0 4rpx 12rpx rgba(140, 140, 140, 0.2);
  }

  &.status-default {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.25) 100%);
    color: #667eea;
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);
  }
}

.node-name {
  font-size: 30rpx;
  color: #667eea;
  flex: 1;
  margin-right: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  position: relative;
  padding-left: 40rpx;
  line-height: 1.6;
  letter-spacing: 0.3rpx;
  transition: all 0.3s ease;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32rpx;
    height: 32rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
  }

  &::after {
    content: '';
    position: absolute;
    left: 12rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 8rpx;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  &:hover {
    color: #764ba2;

    &::before {
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.5);
    }

    &::after {
      transform: translateY(-50%) scale(1.2);
    }
  }
}

.create-time {
  font-size: 28rpx;
  color: #999999;
  white-space: nowrap;
  font-weight: 500;
  position: relative;
  letter-spacing: 0.3rpx;
  transition: color 0.3s ease;
  padding-left: 40rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32rpx;
    height: 32rpx;
    background: linear-gradient(135deg, #fa8c16 0%, #faad14 100%);
    border-radius: 50%;
    box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.4);
    transition: all 0.3s ease;
  }

  &::after {
    content: '';
    position: absolute;
    left: 12rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 4rpx;
    height: 10rpx;
    background: #ffffff;
    border-radius: 2rpx;
    transition: all 0.3s ease;
  }

  &:hover {
    color: #fa8c16;

    &::before {
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 6rpx 16rpx rgba(250, 140, 22, 0.5);
    }

    &::after {
      transform: translateY(-50%) scale(1.2);
    }
  }
}

.empty-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  margin: 40rpx 0;

  &::before {
    content: '';
    width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    margin-bottom: 30rpx;
    position: relative;
    opacity: 0.8;
  }

  &::after {
    content: '📋';
    position: absolute;
    font-size: 60rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -90rpx;
    color: #ffffff;
  }

  .empty-text {
    font-size: 32rpx;
    color: #333333;
    text-align: center;
    font-weight: 600;
    margin-bottom: 12rpx;
  }
}

.loading-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  margin: 40rpx 0;

  &::before {
    content: '';
    width: 80rpx;
    height: 80rpx;
    border: 6rpx solid rgba(102, 126, 234, 0.2);
    border-top: 6rpx solid #667eea;
    border-radius: 50%;
    margin-bottom: 30rpx;
    animation: spin 1s linear infinite;
  }

  .loading-text {
    font-size: 30rpx;
    color: #333333;
    text-align: center;
    font-weight: 500;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 卡片入场动画 */
.workflow-card {
  animation: slideInUp 0.6s ease-out;
}

.workflow-card:nth-child(1) { animation-delay: 0.1s; }
.workflow-card:nth-child(2) { animation-delay: 0.2s; }
.workflow-card:nth-child(3) { animation-delay: 0.3s; }
.workflow-card:nth-child(4) { animation-delay: 0.4s; }
.workflow-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .container {
    padding: 24rpx;
  }

  .card-list {
    gap: 28rpx;
  }

  .workflow-card {
    border-radius: 24rpx;
    min-height: 160rpx;

    :deep(.wd-card__body) {
      padding: 32rpx;
    }
  }

  .card-content {
    min-height: 200rpx;
    padding: 10rpx 0;
  }

  .flow-name {
    font-size: 32rpx;

    .item-number {
      font-size: 28rpx;
    }
  }

  .flow-status {
    padding: 12rpx 20rpx;
    font-size: 24rpx;
    min-width: 100rpx;
  }

  .node-name {
    font-size: 26rpx;
  }

  .create-time {
    font-size: 24rpx;
  }

  .empty-box, .loading-box {
    padding: 100rpx 40rpx;
    margin: 40rpx 0;
  }
}

/* 分页样式优化 */
:deep(.wd-pagination) {
  padding: 32rpx 24rpx;
  justify-content: center;
  margin-top: 40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  backdrop-filter: blur(20rpx);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  .wd-pagination__item {
    margin: 0 8rpx;
    border-radius: 12rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;

    &:hover {
      transform: translateY(-2rpx) scale(1.05);
      box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);
    }

    &.wd-pagination__item--active {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #ffffff;
      box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
    }
  }
}
</style>
